<h1>欢迎来到home</h1>
<div>
  <img [src]="imgUrl" alt="">
</div>
<div *ngIf="flag">
  <img src="assets/images/01.png">
</div>
<div *ngIf="!flag">
  <img src="assets/images/02.png">
</div>

<div>
  <span [ngSwitch]="num">
    <p *ngSwitchCase=1>
      1
    </p>
    <p *ngSwitchCase=2>
      2
    </p>
    <p *ngSwitchCase=3>
      3
    </p>
    <p *ngSwitchDefault>
      0
    </p>
  </span>
</div>

<hr>
<h2>样式修改ngClass</h2>

<div [ngClass]="{'bg1': flag,'bg2':!flag}">
  <p>看看是啥颜色</p>
</div>

<h2>动态样式修改ngClass</h2>

<ul>
  <li *ngFor="let item of classNum" [ngClass]="{'bg1': item==1,'bg2': item==2,'bg3': item==3}">{{item}}</li>
</ul>

<ul>
  <li *ngFor="let item of classNum;let key=index" [ngStyle]="{'color': 'red'}">{{key}}
  </li>
</ul>

<h2>管道</h2>
<p>{{today | date:'yyyy-MM-dd hh:MM:ss'}}</p>

<h2>事件</h2>

<button (click)="alert()">这是一个弹窗</button>
<br>
<span>
  {{title}}
</span>
<br>
<button (click)="updateTitle()">修改title</button>

<h2>表单提交</h2>
<input type="text" (keydown)="keyDown($event)">

<h2>双向绑定</h2>

<input type="text" [(ngModel)]="keyWorlds">{{keyWorlds}}